<template>
  <div class="match">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
      <van-cell-group>
        <van-field
          clearable
          @focus="show = true"
          @blur="enter"
          v-model="input_val"
          placeholder="请输入赛事名称关键字"
          @keyup.enter="enter"
        />
      </van-cell-group>
      <transition name="fade">
        <div v-if="show" :class="{ hot_keyword: hot_keyword.length != 0 }">
          <span
            class="hot_keyword_span"
            v-for="(item, index) in hot_keyword"
            :key="index"
            @click="hot_keywords(item.keyword)"
          >{{ item.keyword }}</span>
        </div>
      </transition>
      <ul class="matchList" >
        <li v-for="(val, index) in list" :key="index" @click="Apply(val)">
          <div
            class="status"
            :class="{ og: val.status == 2 || val.status == 3, os: val.status == 4, od: val.status == 5 }"
          >
            <span v-if="val.status == 2">未开始</span>
            <span v-if="val.status == 3">未开始</span>
            <span v-if="val.status == 4">进行中</span>
            <span v-if="val.status == 5">已结束</span>
          </div>
          <p class="name">{{ val.name }}</p>
          <div class="justify">
            <div class="left">
              <p class="host">主办方：{{ val.host }}</p>
              <p class="adress">地址：{{ val.address }}</p>
              <p class="date">
                时间：
                <span v-if="val.start_time != null">{{ String(val.start_time).slice(0, -3) }}</span>
                 <span style="margin-left: 0.25rem; font-size: 0.23rem; color: #aaa;"><i class="iconfont icon icon-guankan01" style="font-size: 0.3rem;"></i> {{val.check_number}}</span>
              </p>
            </div>
            <div class="right" style="display: none;">
              <div class="greenbtn" v-if="val.status == 2" @click="Apply(val.id)">报名</div>
              <div class="greenbtn" v-if="val.status == 3" @click="Apply(val.id)">报名</div>
              <div
                class="greenbtn"
                v-if="val.status == 4"
                @click="checkDetail(val.id, val.name, val.logo)"
              >查看</div>
              <div
                class="greenbtn"
                v-if="val.status == 5"
                @click="checkDetails(val.id, val.name, val.logo)"
              >查看</div>
              <div class="border-green-btn">
                <a target="_blank" :href="val.rule" v-if="val.is_rule=='0'">竞赛规程</a>
								<span @click="checkRules(val)"  v-if="val.is_rule=='1'">竞赛规程</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </scroller>
    <div class="fixed" @click="toCensus">
      <img class="fixed-icon" src="http://qncdn.tissys.com/mobile/static/img/count02.png" alt />
    </div>
  </div>
</template>
<script>
import eventBus from "../../../../build/evenBus.js";
export default {
  data() {
    return {
      matchList: [],
      list: [],
      items: [],
      offset: 0,
      limit: 10,
      status: "2,3,4,5",
      noDate: false,
      search: "",
      input_val: "",
      show: false,
      hot_keyword: []
    };
  },
  mounted() {
    eventBus.$on("tabs_on", newValue => {
      this.status = newValue;
      this.offset = 0;
      this.refresh();
    });
    this.get_keyword();
  },
  beforeDestroy() {
    //解决eventbus 多次触发的问题
    eventBus.$off("tabs_on");
  },
  methods: {
    toCensus() {
      this.$router.push({ path: "/mine/my_data" });
    },
    get_keyword() {
      var params = new URLSearchParams();
      this.$axios
        .post("/mobile/Matching/get_keyword", params)
        .then(res => {
          const { code, data } = res.data;
          if (code == 2000) {
            this.hot_keyword = data;
          }
        })
        .catch(res => {});
    },
		// 查看竞赛规程
		checkRules(val){
			this.$router.push({
			  path: '/match/MatchRules',
			  query: {
			    id: val.id
			  }
			});
		},
    enter() {
      this.search = this.input_val;
      this.offset = 0;
      this.refresh();
    },
    hot_keywords(keyword) {
      this.search = keyword;
      this.offset = 0;
      this.refresh();
    },
    checkDetail(index, name, logo) {
      console.log(index);
      var a = JSON.stringify(index);
      localStorage.setItem("index", index);
      localStorage.setItem("name", name);
      localStorage.setItem("logo", logo);
      this.$router.push({
        path: "/match/detail/matchSchedule",
        query: {
          id: index,
          name: name,
          defaultId: 7
        }
      });
    },
    checkDetails(index, name, logo) {
      var url = location.href
      console.log(url)
      var a = JSON.stringify(index);
      localStorage.setItem("index", index);
      localStorage.setItem("name", name);
      localStorage.setItem("logo", logo);
      this.$router.push({
        path: "/match/endCheck",
        query: {
          id: index,
          name: name,
          defaultId: 100
        }
      });
    },
    Apply(val) {
			let status = val.status
			let id = val.id
			let name = val.name
			let logo = val.logo
      var url = location.href
      console.log(url)
      var a = JSON.stringify(id);
      localStorage.setItem("val", a);
      if(status==2||status==3){
				this.$router.push({
				  path: "/match/apply",
				  query: {
				    id
				  }
				});
			}else if(status==4){
				this.checkDetail(id, name, logo)
			}else{
				if(status==5){
					this.checkDetails(id, name, logo)
				}
			}
			
    },
    getDate(fn) {
			// console.log(window.location.href.split('='))
      var params = new URLSearchParams();
      params.append("status", this.status);
      params.append("page", this.offset);
      params.append("search", this.search);
      params.append("open_id",  window.localStorage.getItem('openid'));
			params.append('club_id',window.sessionStorage.getItem('club_id'))
      this.$axios
        .post("/mobile/matching/com_list", params)
        .then(data => {
          if (data.data.code == 2000) {
            if (this.offset === 1) {
              this.list = data.data.data;
            } else {
              this.list = this.list.concat(data.data.data);
            }
            if (data.data.data.length < 10) {
              this.noDate = true;
            }
          } else {
            return false;
          }
        })
        .catch(error => {});
    },
    infinite: function(done) {
      if (this.noDate) {
        this.$refs.myscroller.finishInfinite(true);
      } else {
        setTimeout(() => {
          this.offset++;
          this.getDate(done);
          done();
        }, 500);
      }
    },
    refresh: function(done) {
      this.offset = 1;
      this.noDate = false;
      setTimeout(() => {
        this.getDate(done);
        this.$refs.myscroller.finishPullToRefresh();
      }, 300);
    }
  }
};
</script>
<style lang="less" scoped>
.fixed {
  position: fixed;
  bottom: 2rem;
  right: 0.5rem;
  z-index: 99;
}
.fixed-icon {
  width: 1rem;
  height: 1rem;
  border: 1px #ccc solid;
  border-radius: 50%;
  padding: 0.1rem;
  box-shadow: rgba(65, 62, 58, 0.5) 1px 1px 5px;
  animation-timing-function: ease-in-out;
  animation-name: breathe;
  animation-duration: 2700ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes breathe {
  0% {
    opacity: 0.5;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    border: 1px solid rgba(200, 200, 200, 1);
    box-shadow: 0 1px 5px rgba(200, 200, 200, 1);
  }
}
.hot_keyword_span {
  margin-right: 0.2rem;
  margin-bottom: 0.1rem;
}
.hot_keyword {
  padding: 0.2rem;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.match {
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
}

.matchList {
  padding: 0.2rem;
  width: 100%;
  box-sizing: border-box;

  li {
    margin-bottom: 0.2rem;
    box-shadow: 1px 1px 1px #eaeaea;
    width: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    text-align: left;
    color: #413e3a;
    overflow: hidden;

    .name {
      font-weight: 600;
      font-size: 0.32rem;
      line-height: 0.6rem;
      margin-top: 0.1rem;
      margin-left: 0.6rem;
    }

    .status {
      position: absolute;
      height: 0.4rem;
      width: 2rem;
      background-color: #42b574;
      color: #fff;
      text-align: center;
      transform: rotate(-45deg);
      top: 0.16rem;
      left: -0.65rem;
      box-shadow: 0px 0px 4px 1px #ccc;
    }

    .og {
      background-color: #ff8200;
    }

    .os {
      background-color: #ffbd00;
    }

    .od {
      background-color: #579c00;
    }

    .justify {
      display: flex;
      justify-content: space-between;
    }

    .left {
      margin-left: 0.6rem;

      .data {
        width: 100rem;
      }

      .host,
      .adress,
      .time {
        line-height: 0.46rem;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      top: -2px;
      right: 2%;

      .greenbtn {
        background-color: #42b574;
        color: #fff;
        text-align: center;
        height: 0.5rem;
        line-height: 0.5rem;
        width: 1.5rem;
        position: relative;
      }

      .border-green-btn {
        width: 1.48rem;
        height: 0.48rem;
        line-height: 0.48rem;
        float: right;
        background-color: #fff;
        border: 0.01rem solid #42b574;
        color: #42b574;
        text-align: center;
        position: relative;

        a {
          color: #42b574;
        }
      }

      .greenbtn + .border-green-btn {
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
